<template>
    <div title="添加项目" style="padding:20px" top="50px" :before-close="close">
        <el-form class="mt-20" :model="formData" label-width="130px" style="width:100%;max-width: 1200px;"
            :rules="formRules" ref="formRef">
            <el-form-item prop="project_name" label="项目名称">
                <el-input placeholder="项目名称" v-model="formData.project_name"></el-input>
            </el-form-item>
            <el-form-item prop="project_type" label="项目分类">
                <el-select v-model="formData.project_type">
                    <el-option v-for="(item,index) in project_type_list" :key="`project_type_${index}`" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="project_manager" label="负责人">
                <el-input v-model="formData.project_manager" placeholder="请填写负责人"></el-input>
            </el-form-item>
            <el-form-item prop="manager_mobile" label="负责人手机">
                <el-input v-model="formData.manager_mobile" placeholder="请填写负责人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="project_img" label="项目立项书图片">
                <elUploadImage v-model="formData.project_img" :multiple="false" :limit="1"></elUploadImage>
            </el-form-item>
            <el-form-item prop="biding_img" label="中标通知书图片">
                <elUploadImage v-model="formData.biding_img" :multiple="false" :limit="1"></elUploadImage>
            </el-form-item>
            <el-form-item prop="status" label="项目状态">
                <el-radio-group v-model="formData.status">
                    <el-radio :label="0">进行中</el-radio>
                    <el-radio :label="1">未结算</el-radio>
                    <el-radio :label="2">已结算</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="desc" label="项目详情">
                <editorComponents v-model="formData.desc"></editorComponents>
            </el-form-item>
            <el-form-item prop="status" label="">
                <div>
                    <el-button type="primary" @click="submit">{{ $route.query.edit ? '编辑' : '添加' }}</el-button>
                    <el-button @click="close">关闭</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import elUploadImage from '@/components/el-upload-image.vue'
import editorComponents from '@/components/editor.vue'
export default {
    data() {
        return {
            editor: null,
            project_type_list:[],//项目分类列表
            formData: {
                project_name: "",
                project_manager: "",
                manager_mobile: "",
                project_type: undefined,
                project_img: [],
                biding_img: [],
                status: 0,
                desc: ""
            },
            formRules: {
                project_name: [
                    { required: true, message: '请输入项目名称', trigger: ['change', 'blur'] }
                ],
                project_type:[
                    { required:true,message:'请选择项目分类',trigger:['blur'] }
                ],
                project_manager: [
                    { required: true, message: '请输入项目负责人', trigger: ['change', 'blur'] }
                ],
				manager_mobile: [
								    {
								        required: true,
								        message: "此项为必填项"
								    },
								    {
								        pattern:/^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/,
								        message: "手机号码格式错误"
								    }
								],
                // manager_mobile: [
                //     { required: true, message: '请输入项目负责人联系方式', trigger: ['change', 'blur'] },
                //     { min: 6, max: 11, message: '请填写正确手机号', trigger: ['blur'] }
                // ],
                project_img: [
                    { required: true, message: '请上传项目立项书', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '请选择项目状态', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请填写项目详情', trigger: 'blur' }
                ]
            },
        }
    },
    props: {
        value: Boolean
    },
    components: {
        elUploadImage,editorComponents
    },
    created() {
        this.isEdit()
        this.getProjectTypeList()
    },
    methods: {
        async getProjectTypeList(){
            let res = await this.$post({
                url:'/admin/project.projectCate/index',
            })
            this.project_type_list = res.list
        },
        async isEdit() {
            let { edit, id } = this.$route.query
            try {
                if (edit) {
                    let { row } = await this.$get({
                        url: '/admin/project.Project/edit',
                        params: {
                            id: id
                        }
                    })
                    row.project_img = row.project_img ? [{ url: row.project_img, uid: Math.random().toFixed(10) }] : []
                    row.biding_img = row.biding_img ? [{ url: row.biding_img, uid: Math.random().toFixed(10) }] : []
                    Object.assign(this.formData, row)
                }
            } catch (err) {
                console.log(err)
            }
        },
        createEditor(editor) {
            this.editor = Object.seal(editor)
        },
        
        submit() {
            this.$refs.formRef.validate(async (valid) => {
                if (valid) {
                    let cpFormData = JSON.parse(JSON.stringify(this.formData))
                    cpFormData.project_img = cpFormData.project_img[0] ? cpFormData.project_img[0].url : ''
                    cpFormData.biding_img = cpFormData.biding_img[0] ? cpFormData.biding_img[0].url : ''
                    // 编辑
                    try {
                        await this.$post({
                            url: this.$route.query.edit ? '/admin/project.Project/edit' : '/admin/project.Project/add',
                            data: cpFormData,
                            successTip: true,
                            loadingTip: true
                        })
                        this.$router.back()
                    } catch (err) {
                        console.log(err)
                    }
                }
            })
        },
        close() {
            Object.assign(this.$data, this.$options.data())
            // this.$emit('input', false)
            this.$router.back()
        }
    }
}
</script>
<style>
</style>